<template>
  <div class="timing">
    <div class="dialogItems">
      <div v-loading="loadingV1">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm autoClass">
          <el-form-item label="kafka Cluster" prop=" ">
            {{ kafkaCluster }}
          </el-form-item>
          <el-form-item label="Topic Name" prop="topicName">
            <el-input v-model="ruleForm['topicName']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="Group ID" prop="groupID">
            <el-input v-model="ruleForm['groupID']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="Wait Time(ms)" prop="waitTime">
            <el-input v-model="ruleForm['waitTime']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="消费条数" prop="recordNum">
            <el-input v-model="ruleForm['recordNum']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="是否提交偏移量" prop="isCommit">
            <el-checkbox-group v-model="ruleForm['isCommit']">
              <el-checkbox label="Consumer Topic By Offset" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="" style="width:100%;">
            <el-button  style="width: 100%;" type="primary" plain @click="sendForm('ruleForm')">发送</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="max-height:350px;overflow: scroll;"><pre style="white-space:pre-wrap;">{{ resOutInfo }}</pre></div>
    </div>
  </div>
</template>

<script>
import { topicqueryTopicData } from '@/api/zt/index'
import experiment from '@/mixins/experiment'

import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  props:{
    addthemeadmInfo:{
      type:Object,
      require:false,
      default:()=>{
        return {
          topicName:"",
          groupID:""
        }
      }
    },
    kafkaCluster:{
      type:String,
      require:true,
      default:''
    },
    clusterId:{
      type: String,
      require: true,
      default: () => {
        return ''
      }
    }
  },
  mixins: [experiment],
  data() {
    return {
      loadingV1:false,
      resOutInfo:null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rules: {
        topicName: [
            { required: true, message: '请输入topicName', trigger: 'change' }
        ],
        groupID: [
            { required: true, message: '请输入Group ID', trigger: 'change' }
        ],
        waitTime: [
            { required: true, message: '请输入Wait Time(ms)', trigger: 'change' }
        ],
        recordNum: [
            { required: true, message: '请输入消费条数', trigger: 'change' }
        ]
      },
      dialogTableVisible: false,
      ruleForm: {
        'groupID': '',
        'isByPartition': '',
        'isCommit': '',
        'clusterID':'',
        'recordNum': '',
        'topicName': '',
        'waitTime': ''
      }
    }
  },
  created() {
    this.ruleForm={
        'groupID':this.addthemeadmInfo.groupID,
        'isByPartition': '',
        'clusterID':'',
        'isCommit': '',
        'recordNum': '',
        'topicName': this.addthemeadmInfo.topicName,
        'waitTime': ''
      }
      
  },
  mounted() {
    this.$nextTick(() => {
       this.ruleForm.clusterID = this.clusterId
    })
  },
  methods: {
    clearList(){
       
    },
    sendForm(v) {
      this.$refs[v].validate((valid) => {
          if (valid) {
            this.loadingV1 = true
            topicqueryTopicData(this.ruleForm).then(res => {
              this.resOutInfo = res.data||[]
            }).finally(()=>{
              this.loadingV1 = false
            })
          } else {
            return false;
          }
        });
    }
  }
}
</script>

    <style lang="scss" scoped>
    .dialogItems{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .dialogItems>div{
      width: 48%;
    }
    .dialogItems>div:nth-child(2){
      background: #002b36;
      color: #e5e5e5;
      padding: 8px;
      box-sizing: border-box;
    }
    .autoInput{
      display: inline-block;
      width: 70%;
    }
    .infoTitle{
      border-bottom:1px solid #e5e5e5;
      margin-bottom: 30px;
      position: relative;
    }
    .infoTitle>span{
      position: absolute;
      left: 20px;
      background: #fff;
      width:80px;
      top:-15px;
      height:30px;
      text-align: center;
      line-height: 30px;
    }
      .el-select{
        width:100%;
      }
      .timing{
        background:#fff;
        padding:20px;
      }
  .autoClass2{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
  }
    </style>
